Hexo+Github 搭建属于自己的博客（进阶）NexT主题

发表于 | 分类于 | | 阅读数
字数统计: 1,800 字 | 阅读时长 ≈ 9 分钟

主题安装

安装NexT

在站点目录下（hexo），输入命令：

1
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

启用主题

在站点目录中（blog），打开配置文件_config.yml，修改

1
theme：next

验证主题

1
$ hexo s

主题设定

以下所有设置注意格式

NexT主题设定

可以在next主题目录下的_config.yml文件中修改

1
2
3
4
5
# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

基础设置

在站点目录下的配置文件_cofig.yml中修改

1
2
3
4
5
6
7
8
# Site
title: your blog title
subtitle:
description: describe yourself
keywords:
author: yourname
language: zh-Hans //简体中文
timezone:

修改菜单项

在主题目录下修改配置文件_cofig.yml中的menu

1
2
3
4
5
6
7
8
9
menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

这些配置都要与你主题目录下的languages文件中对应的yml文档里配置相关联

1
2
3
4
5
6
7
8
9
10
menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  schedule: 日程表
  sitemap: 站点地图
  commonweal: 公益404

限定主页文章高度

修改主题目录下的值

1
2
3
auto_excerpt:
  enable: true
  length: 150

设置头像

修改主题目录下Sidebar Avatar的avatar值

1
2
3
4
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
avatar: /images/avatar.jpg

地址可以是网络地址，也可以是本地地址（放置在source/images/ 目录下）

添加标签页面

点击标签，跳转的页面会显示page not found

此时需要在站点目录的source文件夹里新建tags文件夹，并新建index.md，添加：

1
2
3
4
5
---
title: tags
date: 
type: "tags"
---

当要为某一篇文章添加标签，只需在blog/source/_post目录下的具体文章的tags中添加标签即可

实现点击出现桃心效果

将代码copy到/themes/next/source/js/src里面新建的love.js中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
! function(e, t, a) {
    function n() {
        c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), o(), r()
    }

    function r() {
        for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");
        requestAnimationFrame(r)
    }

    function o() {
        var t = "function" == typeof e.onclick && e.onclick;
        e.onclick = function(e) {
            t && t(), i(e)
        }
    }

    function i(e) {
        var a = t.createElement("div");
        a.className = "heart", d.push({
            el: a,
            x: e.clientX - 5,
            y: e.clientY - 5,
            scale: 1,
            alpha: 1,
            color: s()
        }), t.body.appendChild(a)
    }

    function c(e) {
        var a = t.createElement("style");
        a.type = "text/css";
        try {
            a.appendChild(t.createTextNode(e))
        } catch (t) {
            a.styleSheet.cssText = e
        }
        t.getElementsByTagName("head")[0].appendChild(a)
    }

    function s() {
        return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
    }
    var d = [];
    e.requestAnimationFrame = function() {
        return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function(e) {
            setTimeout(e, 1e3 / 60)
        }
    }(), n()
}(window, document);

打开\themes\next\layout_layout.swig文件,在末尾（在前面引用会出现找不到的bug） ，引用love.js

1
<script src="/js/src/love.js" type="text/javascript"></script>

添加动态背景

打开\themes\next\layout_layout.swig文件，
在 之前添加代码(注意不要放在< /head>的后面)

1
2
3
{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

打开开\themes\next_config.yml,在里面修改为如下代码

1
canvas_nest: true

在网站底部加上访问量

打开 \themes\next\layout_partials\footer.swig 文件,在开头加上这段代码：

1
2
3
{% if theme.footer.counter %}
  <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
{% endif %}

在 \themes\next_config.yml 中进行配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
footer:
  counter: true


busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i>  访客数
  site_uv_footer:
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i>  总访问量
  site_pv_footer:
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i>  阅读数
  page_pv_footer:

在每篇文章末尾添加“本文结束”标记

在路径 \themes\next\layout_macro 中新建 passage-end-tag.swig 文件,并添加以下内容

1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

接着打开\themes\next\layout_macro\post.swig文件，在post-body 之后， post-footer 之前添加如下代码

1
2
3
4
5
<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

打开主题配置文件,在末尾添加

1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

侧边栏社交链接

在主题配置文件中修改：

1
2
3
4
5
6
7
8
9
10
11
12
13
# Social links
social:
  GitHub: https://github.com/your-user-name
  Twitter: https://twitter.com/your-user-name
  微博: http://weibo.com/your-user-name

# Social Icons
social_icons:
  enable: true
  # Icon Mappings
  GitHub: github
  Twitter: twitter
  微博: weibo

添加小图标

在主题配置文件中修改：

1
2
3
favicon:
  #small: /images/favicon.ico
  medium: /images/favicon.ico

添加评论

gitment

使用系统：==gitment==，它是基于 github 开发的，是依靠于 GitHub Issues 的评论系统，Next >= 5.1.2

  1. 进入 developer settings 申请 oAuth Apps
  2. Homepage URL 和 Authorization callback URL 填写博客地址
  3. 获取 client_id 和 client_secret
  4. 新建github项目存放comment
  5. 配置 \themes\next_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
gitment:
  enable: true
  mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
  count: true # Show comments count in post meta area
  lazy: false # Comments lazy loading with a button
  cleanly: false # Hide 'Powered by ...' on footer, and more
  language: # Force language, or auto switch by theme
  github_user: [] # MUST HAVE, Your Github ID
  github_repo: [comment github name] # MUST HAVE, The repo you use to store Gitment comments
  client_id: [client id] # MUST HAVE, Github client id for the Gitment
  client_secret: [client secret] # EITHER this or proxy_gateway, Github access secret token for the Gitment
  proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
  redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled
  1. 生成部署，有时候预览没有效果
  2. 每篇文章都需要初始化评论页面才能开始使用评论功能
  3. 部署之后，有可能碰到 Not Found Error，再等待一会儿就可以了

注意：
找到themes/next/layout/_third-party/comments/gitment.swig 文件，进行如下修改：

1
2
3
4
5
6
7
<!-- 原代码 -->
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>

<!-- 修改后 -->
<link rel="stylesheet" href="https://billts.site/extra_css/gitment.css">
<script src="https://billts.site/js/gitment.js"></script>

valine

  1. 注册 LeanCloud
  2. 创建应用，选择开发版，获取 AppID 和 AppKey
  3. 配置 \themes\next_config.yml
1
2
3
4
5
6
7
8
9
10
valine:
  enable: true
  appid: [AppID] # your leancloud application appid
  appkey: [AppKey] # your leancloud application appkey
  notify: false # mail notifier , https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: Just go go # comment box placeholder
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size

注意：
配置后，所有页面的comments都默认为true，如果页面需要关闭评论，则需设置为false。

其他

NexT主题美化

除了NexT还有很多其他好看的主题，百度会有很多方法的

-------------本文结束 感谢您的阅读-------------